<template>

    <Card class="bomCard">
      <Col span="24" class="title">BOM</Col>
      <div class="bom_box">
       <Row>
         <Col span="6">
           <Col span="24">
             <div class="box_top">
              <div style=" width:200px; display: flex;justify-content: space-between;align-items: center">
                <Upload
                    style="width:97px;margin-bottom: 10px;"
                    ref="upload"
                    accept="*"
                    :show-upload-list="false"
                    :on-success="handleSuccess"
                    :on-error="uploadErro"
                    type="drag"
                    :headers="headers"
                    :action="fileUploadUrl"
                >
                  <Button style="width:100%;">导入</Button>
                </Upload>
                <Button @click="exportTemplate" style="width:97px;margin-bottom: 10px;">下载</Button>
              </div>
<!--               <span class="title">BOM版本</span>-->
<!--               <Select v-model="versionValue" style="width:200px;margin-bottom: 10px;">-->
<!--                 <Option v-for="item in VersionList"-->
<!--                         :value="item.value"-->
<!--                         :label="item.label"-->
<!--                         :key="item.value"/>-->
<!--               </Select>-->
               <Input search style="width:200px;margin-bottom: 1px;" @on-keyup="inputKeyUp" v-model="searchText"/>
             </div>
           </Col>
           <Col span="24">
             <div class="box_bot">
<!--               :item-events="itemEvents"-->
               <v-jstree :data="treeData"
                         ref="tree"
                         v-if="showStatus"
                         @item-drag-start="itemDragStart"
                         @item-drop="itemDrop"
                         draggable
                         no-dots
                         text-field-name="materielNo"
                         @item-click="itemClick">
                 <template scope="_">
                   <div style="display: flex;justify-content: flex-end;align-items: center;">
                     <i :class="_.vm.themeIconClasses" role="presentation" v-if="!_.model.loading"></i>
                     <template v-if="_.model.selected">
                       <template>
                         <template v-if="_.model.materielName">{{_.model.materielNo + '(' + _.model.materielName + ')'}}</template>
                         <template v-else>{{_.model.materielNo}}</template>
                        <div class="iconBox">
                          <template v-if="_.model.parentId !== -1">
                            <span class="icon_img" @click="editClick">
                              <img src="@/assets/imgs/list/bomedit.png"/>
                            </span>
                            <span class="icon_img" @click="delFaultCodeShowF = true,$event.stopPropagation()">
                              <img src="@/assets/imgs/list/bomdel.png"/>
                            </span>
                          </template>
                          <span v-if="_.model.materielNo !== '新增BOM'" class="icon_img" @click="addChildNode">
                              <img src="@/assets/imgs/list/bomadd.png"/>
                            </span>
                        </div>
                       </template>
                     </template>
<!--                     <template v-else-if="_.model.editStatus">-->
<!--                        <Input-->
<!--                            class="tarGetinput"-->
<!--                            ref="tarGetinput"-->
<!--                            @on-change="inputChange(_.model)"-->
<!--                              v-model="_.model.materielNo"-->
<!--                               @on-blur='blur(_.model)'/>-->
<!--                     </template>-->
                     <template v-else>
                       <template v-if="_.model.materielName">{{_.model.materielNo + '(' + _.model.materielName + ')'}}</template>
                       <template v-else>{{_.model.materielNo}}</template>
                     </template>
                   </div>
                 </template>
               </v-jstree>
             </div>
           </Col>
         </Col>
         <Col span="18" class="boxLeft">
<!--           <Col span="24">-->
<!--             <span class="detail_title">物料详情</span>-->
<!--           </Col>-->
<!--            <Col span="24">-->
<!--              <div class="right_box">-->
<!--                <Form :model="formBox" label-position="top">-->
<!--                 <Row>-->
<!--                    <Col span="24">-->
<!--                      <Row>-->
<!--                        <Col span="8" class="item_right">-->
<!--                          <FormItem label="物料编号">-->
<!--                            <Input v-model="editingItem.materielNo" :placeholder="`${$t('common.inputInfo')}`"/>-->
<!--                          </FormItem>-->
<!--                        </Col>-->
<!--                        <Col span="8" class="item_right">-->
<!--                          <FormItem label="物料名称">-->
<!--                            <Input v-model="editingItem.materielNo"  :placeholder="`${$t('common.inputInfo')}`"/>-->
<!--                          </FormItem>-->
<!--                        </Col>-->
<!--                        <Col span="8" class="item_right">-->
<!--                          <FormItem label="规格">-->
<!--                            <Input v-model="editingItem.specification"  :placeholder="`${$t('common.inputInfo')}`"/>-->
<!--                          </FormItem>-->
<!--                        </Col>-->
<!--                      </Row>-->
<!--                    </Col>-->
<!--                   <Col span="24">-->
<!--                     <Row>-->
<!--                       <Col span="8" class="item_right">-->
<!--                         <FormItem label="材料">-->
<!--                           <Input v-model="editingItem.materialProperties"  :placeholder="`${$t('common.inputInfo')}`"/>-->
<!--                         </FormItem>-->
<!--                       </Col>-->
<!--                       <Col span="8" class="item_right">-->
<!--                         <FormItem label="单位">-->
<!--                           <Input v-model="editingItem.unit"  :placeholder="`${$t('common.inputInfo')}`"/>-->
<!--                         </FormItem>-->
<!--                       </Col>-->
<!--                       <Col span="8" class="item_right">-->
<!--                         <FormItem label="数量">-->
<!--                           <Input v-model="editingItem.quantity"  :placeholder="`${$t('common.inputInfo')}`"/>-->
<!--                         </FormItem>-->
<!--                       </Col>-->
<!--                     </Row>-->
<!--                   </Col>-->
<!--                 </Row>-->
<!--                </Form>-->
<!--              </div>-->
<!--            </Col>-->
<!--           <Col span="24" class="box_upload">-->
<!--             <Row>-->
<!--               <Col span="12">-->
<!--                 <span class="detail_title">上传附件</span>-->
<!--               <div style="display: flex;-->
<!--               flex-direction: column;-->
<!--               justify-content: center;padding: 0 10px;">-->
<!--                 <Col span="12">-->
<!--                   <Upload-->
<!--                       type="drag"-->
<!--                       :show-upload-list="false"-->
<!--                       action=""-->
<!--                       :before-upload="handleUpload"-->
<!--                   >-->
<!--                     <div style="padding: 20px 0">-->
<!--                       <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>-->
<!--                       <p>点击或者拖拽上传</p>-->
<!--                     </div>-->
<!--                   </Upload>-->
<!--                 </Col>-->
<!--                 <Col span="12">-->
<!--                   <div class="attachmentList">-->
<!--                     <template v-for="item in attachmentList">-->
<!--                       <Row>-->
<!--                         <Col span="24" class="barBox" :key="item.filePath">-->
<!--                           <div class="barTop">-->
<!--                             <span>{{item.fileName}}</span>-->
<!--                             <span style="cursor: pointer"-->
<!--                             @click="delItem(item)"-->
<!--                             ><Icon type="md-close" /></span>-->
<!--                           </div>-->
<!--                           <Progress v-if="item.uploadStatus"-->
<!--                                     :stroke-width="5"-->
<!--                                     :percent="item.progressBar" />-->
<!--                         </Col>-->
<!--                       </Row>-->
<!--                     </template>-->
<!--                   </div>-->
<!--                 </Col>-->
<!--               </div>-->
<!--               </Col>-->
<!--               <Col span="12">-->
<!--                 <span class="detail_title">上传图片</span>-->
<!--                 <div style="display: flex;-->
<!--               flex-direction: column;-->
<!--               justify-content: center;padding: 0 10px;">-->
<!--                   <Col span="12">-->
<!--                     <Upload-->
<!--                         type="drag"-->
<!--                         :show-upload-list="false"-->
<!--                         action=""-->
<!--                         :before-upload="handleUploadImg"-->
<!--                     >-->
<!--                       <div style="padding: 20px 0">-->
<!--                         <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>-->
<!--                         <p>点击或者拖拽上传</p>-->
<!--                       </div>-->
<!--                     </Upload>-->
<!--                   </Col>-->
<!--                   <Col span="12">-->
<!--                     <div class="attachmentList">-->
<!--                       <template v-for="item in imgList">-->
<!--                         <Row>-->
<!--                           <Col span="24" class="barBox" :key="item.filePath">-->
<!--                             <div class="barTop">-->
<!--                               <span>{{item.fileName}}</span>-->
<!--                               <span style="cursor: pointer"-->
<!--                                     @click="delItemimg(item)"-->
<!--                               ><Icon type="md-close" /></span>-->
<!--                             </div>-->
<!--                             <Progress v-if="item.uploadStatus"-->
<!--                                       :stroke-width="5"-->
<!--                                       :percent="item.progressBar" />-->
<!--                           </Col>-->
<!--                         </Row>-->
<!--                       </template>-->
<!--                     </div>-->
<!--                   </Col>-->
<!--                 </div>-->
<!--               </Col>-->
<!--             </Row>-->
<!--           </Col>-->
           <Col :span="EquipmentListShow ? 15 : 24">
             <Form ref="formModel" class="formList" :model="formItem" :rules="ruleValidate" label-position="top">
               <Row :gutter="16">
                 <Col span="12">
                   <!--料号-->
                   <FormItem :label="$t('spareParts.PartNo')" prop="materielNo" v-if="editStatus">
                     <Input type="text" v-model="formItem.materielNo"
                            :disabled="editStatus"
                            :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
                   </FormItem>
                   <FormItem :label="$t('spareParts.PartNo')" prop="materielNo" v-else>
                     <Input type="text" v-model="formItem.materielNo"
                            :disabled="!editingItem.newAddstatus"
                            :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
                   </FormItem>
                 </Col>
                 <Col span="12">
                   <!--品名-->
                   <FormItem :label="$t('spareParts.Name')" prop="goodsName">
                     <Input type="text" v-model="formItem.goodsName"
                            :disabled="editStatus"
                            :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
                   </FormItem>
                 </Col>
               </Row>

               <row :gutter="16">
                 <Col span="12">
                   <!--规格-->
                   <FormItem :label="$t('spareParts.Specification')" prop="specification">
                     <Input type="text" v-model="formItem.specification"
                            :disabled="editStatus"
                            :placeholder="`${$t('common.inputInfo')}`"
                            :maxlength="32"></Input>
                   </FormItem>
                 </Col>
                 <Col span="12">
                   <!--品牌-->
                   <FormItem :label="$t('spareParts.Brand')" prop="brand">
                     <Input type="text" v-model="formItem.brand"
                            :disabled="editStatus"
                            :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
                   </FormItem>
                 </Col>
               </row>
               <Row :gutter="16">
                 <Col span="12">
                   <!--备件ABC类-->
                   <FormItem :label="$t('spareParts.SparePartABC')" prop="sparePartsAbc">
                     <Row :gutter="16">
                       <Tooltip placement="top" transfer>
                         <Icon type="ios-help-circle-outline" size="24" style="line-height:32px"/>
                         <template #content>
                           <div style=" width:200px">
                             <Table :columns="tooltipColumns" :data="tooltipData"></Table>
                           </div>
                         </template>
                       </Tooltip>
                       <Col span="21">
                         <Select v-model="formItem.sparePartsAbc" filterable clearable
                                 :disabled="editStatus"
                                 :placeholder="`${$t('common.selectInfo')}`">
                           <Option v-for="(item) of sparePartsAbcList"
                                   :value="item.value"
                                   :key="item.value"
                                   :label="item.label">
                           </Option>
                         </Select>
                       </Col>
                     </Row>
                   </FormItem>
                 </Col>
                 <Col span="12">
                   <!--备件备件VED类-->
                   <FormItem :label="$t('spareParts.SparePartVED')" prop="sparePartsVed">
                     <Row :gutter="16">
                       <Tooltip  transfer placement="top" max-width="450">
                         <Icon type="ios-help-circle-outline" size="24" style="line-height:32px"/>
                         <template #content>
                           <div style=" width:400px">
                             <Table :columns="tooltipColumns2" :data="tooltipData2"></Table>
                           </div>
                         </template>
                       </Tooltip>
                       <Col span="21">
                         <Select v-model="formItem.sparePartsVed" filterable clearable
                                 :disabled="editStatus"
                                 :placeholder="`${$t('common.selectInfo')}`">
                           <Option v-for="(item) of sparePartsVedList"
                                   :value="item.value"
                                   :key="item.value"
                                   :label="item.label">
                           </Option>
                         </Select>
                       </Col>
                     </Row>
                   </FormItem>
                 </Col>
               </Row>
               <Row :gutter="16">
                 <Col span="12">
                   <!--物品分类-->
                   <FormItem :label="$t('common.SpareClassification')" prop="goodsType">
                     <Select v-model="formItem.goodsType" filterable clearable
                             :disabled="editStatus"
                             :placeholder="`${$t('common.selectInfo')}`">
                       <Option v-for="(item) of goodsType"
                               :value="item.value"
                               :key="item.value"
                               :label="item.value">
                       </Option>
                     </Select>
                   </FormItem>
                 </Col>
                 <Col span="12">
                   <!--资产类型-->
                   <FormItem :label="$t('spareParts.AssetType')" prop="assetId">
                     <Select v-model="formItem.assetId"
                             filterable clearable
                             :disabled="editStatus"
                             :placeholder="`${$t('common.selectInfo')}`"
                             @on-change="assetTypeChange">
                       <Option v-for="(item) of assetType"
                               :value="item.value"
                               :key="item.value"
                               :label="item.label">
                       </Option>
                     </Select>
                   </FormItem>
                 </Col>
               </Row>
               <Row :gutter="16">
                 <Col span="12">
                   <!--管理方式-->
                   <FormItem :label="$t('spareParts.ControlMode')" prop="manageType">
                     <Select v-model="formItem.manageType"
                             filterable
                             disabled
                             :placeholder="`${$t('common.selectInfo')}`">
                       <Option v-for="item in manageType"
                               :value="item.value"
                               :key="item.value"
                               :label="item.label">
                       </Option>
                     </Select>
                   </FormItem>
                 </Col>
                 <Col span="12">
                      <!--安全系数Z-->
                      <FormItem :label="$t('安全系数Z')" prop="safetyCoefficient">
                          <Row :gutter="16">
                              <Col span="21">
                                  <InputNumber v-model="formItem.safetyCoefficient" :disabled="editStatus"
                                  :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></InputNumber>
                              </Col>
                              <Tooltip placement="top" max-width="450">
                                  <Icon type="ios-help-circle-outline" size="24" style="line-height:32px"/>
                                  <template #content>
                                      <div style=" width:400px">
                                          <img src="~images/spareHelp.png" width="400">
                                      </div>
                                  </template>
                              </Tooltip>
                          </Row>
                      </FormItem>
                  </Col>
                  <Col span="12">
                      <!--采购提前期L-->
                      <FormItem :label="$t('采购提前期L(天)')" prop="purchaseLeadDay">
                          <InputNumber v-model="formItem.purchaseLeadDay" :disabled="editStatus"
                                  :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></InputNumber>
                      </FormItem>
                  </Col>
                 <Col span="12">
                   <!--安全库存-->
                   <FormItem :label="$t('spareParts.SafetyStock')" prop="safeStock">
                     <Input type="text" v-model="formItem.safeStock"
                            :disabled="editStatus"
                            :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
                   </FormItem>
                 </Col>
               </Row>
               <Row :gutter="16">
                 <Col span="12">
                   <!--标准寿命-->
                   <FormItem :label="$t('spareParts.StandardLifetime')" prop="standardLife">
                     <Input type="text" v-model="formItem.standardLife"
                            :disabled="editStatus"
                            :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"/>
                   </FormItem>
                 </Col>
                 <Col span="12" v-if="!editStatus || setFileList.length">
                   <!--上传附件-->
                   <FormItem :label="$t('spareParts.Upload')">
                     <Upload ref="fileUpload" :show-upload-list="false"
                             :before-upload="handleBeforeUpload"
                             type="drag" action="" style="width:95px">
                       <!-- 点击上传 -->
                       <Button type="primary">{{ $t('common.UploadAttachment') }}</Button>
                     </Upload>

                     <div class="file-list" v-for="(item, index) in setFileList" :key="index">
                       <span class="item-src" @click="handlePreview(item)">{{ item.fileName }}</span>
                       <Icon class="item-icon" type="ios-trash-outline" size="20"
                             @click="delFileList(index)"
                             v-if="item"></Icon>
                     </div>
                   </FormItem>
                 </Col>
               </Row>
             </Form>
<!--             <div class="equipmentContent" @click="handleEquipment">-->
<!--               &lt;!&ndash; <span>关联设备</span> &ndash;&gt;-->
<!--               <span>{{ $t('spareParts.RelatedEquipment') }}</span>-->
<!--               <Icon type="md-add" size='16'/>-->
<!--             </div>-->
             <div>
               <div class="tableContent" v-if="EquipmentIsShow && deviceList != []">
                 <Table ellipsis ref="selection" stripe :columns="equipmentColumns" :data="deviceList"
                        height='300'>
                   <template slot-scope="{ row ,index}" slot="action">
                                    <span class="operationBtn"
                                          @click="handleDel(index)">{{ $t('common.Delete') }}</span>
                   </template>
                 </Table>
               </div>
             </div>
           </Col>
           <Col span="9" v-if="EquipmentListShow">
             <div>
               <div class="searchBox">
                 <Form label-position="right" :label-width="100" class="search-form">
                   <Row :gutter="4">
                     <Col span="20">
                       <!--公司 -->
                       <FormItem :label="$t('common.company')">
                         <Select v-model="equipmentParams.useCompanyId" filterable clearable
                                 :placeholder="`${$t('common.selectInfo')}`">
                           <Option v-for="(item) of companyList"
                                   :value="item.id"
                                   :key="item.code"
                                   :label="item.fullName">
                           </Option>
                         </Select>
                       </FormItem>
                     </Col>
                   </Row>
                   <Row :gutter="4">
                     <Col span="20">
                       <!-- 设备名称 -->
                       <FormItem :label="$t('spareParts.EquipmentName')">
                         <Input type="text" v-model="equipmentParams.deviceName"
                                :placeholder="`${$t('common.inputInfo')}`"
                                :maxlength="32"></Input>
                       </FormItem>
                     </Col>
                     <Col span="2">
                       <Button type="primary" v-if="checkBtnPermission.materialDevicesList"
                               @click="equipmentChangeNum()">{{ $t('common.Query') }}
                       </Button>
                     </Col>
                   </Row>
                   <Table ellipsis ref="selectionList" stripe :columns="equipmentSearchColumns"
                          :data="equipmentListArr" height="500"
                          @on-selection-change="handleSelect"></Table>
                   <div>
                     <Button type="default" @click="closeEquipment">{{ $t('common.Cancle') }}</Button>
                     <Button type="primary" :loading="addLoading" @click="addEquipment">
                       {{ $t('maintenance.Confirmed') }}
                     </Button>
                   </div>
                 </Form>
               </div>
             </div>
           </Col>
         </Col>
       </Row>
      </div>
      <div class="buttonBox" v-if="!editStatus">
        <Button style="margin-right: 10px;" class="ivu-btn-lg" type="primary" @click="addCheck('formModel')">
          {{$t('maintenance.Confirmed')}}
        </Button>
        <Button class="ivu-btn-lg" @click="editStatus = true,$refs['formModel'].resetFields()">
          {{$t('common.Cancel')}}
        </Button>
      </div>
      <Modal :mask-closable="false"
          v-model="MaterialsShow"
          title="信息"
          width="35%"
      >
        <Row>
          <Col span="24" style="margin-bottom: 10px;">
            <span style="display: flex;justify-content: flex-start; align-items: center;  color: red;">
              <Icon type="ios-alert-outline" size="18"/>
              当前物料在下列设备中使用，是否覆盖物料信息</span>
          </Col>
          <Col span="24">
            <Table :columns="columnsInfo" :data="tableDataInfo" stripe />
          </Col>
        </Row>
        <div slot="footer">
          <Button type="default"  @click="MaterialsShow = false">{{$t('common.Cancle')}}</Button>
          <Button type="primary"  @click="goAddtree">{{$t('maintenance.Confirmed')}}</Button>
        </div>
      </Modal>
      <Modal :mask-closable="false"
          v-model="delFaultCodeShowF"
          title=""
      >
        <Row class="enableContent">
          <Col span="24" class="enableContentInner">
            <img width="95px" src="~images/event/del.png" alt="">
          </Col>
          <Col span="24" class="enableTips">
            <span>请确认是否删除？</span>
          </Col>
        </Row>
        <div slot="footer">
          <Button type="default"  @click="delFaultCodeShowF = false">{{$t('common.Cancle')}}</Button>
          <Button type="primary"  @click="removeNode">{{$t('maintenance.Confirmed')}}</Button>
        </div>
      </Modal>
    </Card>
</template>

<script>
import { getCompany } from "@/api/index.js";
import { equipmentSearchApi } from "@/api/spareParts/material.js";
import util from "@/util/util";
import fileDownload from 'js-file-download';
import VJstree from 'vue-jstree';
export default {
  name: "bomComponent",
  components: {
    VJstree
  },
  data() {
    return{
      itemEvents: {
        mouseover:(note,item)=> {
          this.hoverTree(this.treeData)
          item.hoverStatus = true
        }
      },
      tableDataInfo:[],
      columnsInfo:[
        {
          title: '设备编号',
          key: 'deviceMId'
        },
        {
          title: '设备名称',
          key: 'deviceName'
        },
        {
          title: '资产编号',
          key: 'assetsNo'
        },
        {
          title: '安装位置',
          key: 'position4'
        }
      ],
      fileUploadUrl: "",
      delFaultCodeShowF:false,
      deviceList: [],
      MaterialsShow:false,
      ruleValidate: {
        materielNo: [
          {required: true, message: '请填写料号'}
        ],
        goodsName: [
          {required: true, message: '请填写品名'}
        ],
        specification: [
          {required: true, message: '请填写规格'}
        ],
        brand: [
          {required: true, message: '请填写品牌'}
        ],
        sparePartsAbc: [
          {required: true, message: '请选择备件ABC类'}
        ],
        sparePartsVed: [
          {required: true, message: '请选择备件VED类'}
        ],
        goodsType: [
          {required: true, message: '请选择备件分类'}
        ],
        assetId: [
          {required: true, message: '请选择资产类型'}
        ],
        manageType: [
          {required: true, message: '请选择管理方式'}
        ],
        safeStock: [
          {required: true, message: '请填写安全库存'}
        ],
        standardLife: [
          {required: true, message: '请填写标准寿命'}
        ],
        safetyCoefficient: [
          {required: true, message: '请填写安全系数Z', trigger: 'blur', type: 'number'}
        ],
        purchaseLeadDay: [
          {required: true, message: '请填写采购提前期L', trigger: 'blur', type: 'number'}
        ]
      },
      assetType: [
        {
          value: 0,
          label: '非资产类'
        },
      ],
      tooltipColumns: [
        {
          //title: '分类',
          title: `${this.$t('spareParts.Classification')}`,
          key: 'name'
        },
        {
          // title: '分类标准',
          title: `${this.$t('spareParts.ClassificationStandard')}`,
          key: 'info'
        },
      ],
      tooltipData: [
        {
          name: 'A',
          info: '资金累计占比80%且品种占5%'
        },
        {
          name: 'B',
          info: '次要设备'
        },
        {
          name: 'c',
          info: '资金累计占比5%且品种占80%'
        },
      ],
      sparePartsAbcList: [{
        value: 'A',
        label: 'A类'
      }, {
        value: 'B',
        label: 'B类'
      }, {
        value: 'C',
        label: 'C类'
      },
      ],
      sparePartsVedList: [{
        value: 'V',
        label: 'V类'
      }, {
        value: 'E',
        label: 'E类'
      }, {
        value: 'D',
        label: 'D类'
      },
      ],
      tooltipColumns2: [
        {
          // title: '分类',
          title: `${this.$t('spareParts.Classification')}`,
          key: 'name'
        },
        {
          // title: '分类标准',
          title: `${this.$t('spareParts.ClassificationStandard')}`,
          key: 'info'
        },
      ],
      tooltipData2: [
        {
          name: 'V',
          info: '在生产过程中， 那些严重影响生产的，缺货成本很高的，在任何时刻必须可用的备件被归为极其重要的一类'
        },
        {
          name: 'E',
          info: '需求稍微低一点的，库存可以提供的被归为必要的一类'
        },
        {
          name: 'D',
          info: '其余的具有最少需求的、缺货了也不会严重影响生产进度的备件被归为一般可取的一类'
        },
      ],
      setFileList: [],
      equipmentColumns: [
        {
          // title: `${ this.$t('equipCheck.EquipmentName') }`,
          title: `${this.$t('spareParts.EquipmentName')}`,
          key: 'deviceName',
          minWidth: 100,
          align: 'center'
        },
        {
          // title: `${this.$t('spareParts.Model')}`,
          title: `${this.$t('spareParts.Model')}`,
          key: 'specification',
          minWidth: 100,
          align: 'center'
        },
        {
          title: `${this.$t('common.operation')}`,
          slot: "action",
          fixed: 'right',
          minWidth: 150,
          align: "center"
        }
      ],
      EquipmentIsShow: false,
      addLoading: false,
      equipmentListArr: [],
      equipmentSearchColumns: [
        {
          key: 'selection',
          type: 'selection',
          width: 60,
          fixed: 'left',
          align: 'center'
        },
        {
          //title: '设备名称',
          title: `${this.$t('spareParts.EquipmentName')}`,
          key: 'deviceName',
          minWidth: 100,
          align: 'center'
        },
        {
          // title: `${this.$t('spareParts.Model')}`,
          title: `${this.$t('spareParts.Model')}`,
          key: 'specification',
          minWidth: 100,
          align: 'center'
        },
      ],
      checkBtnPermission: {},
      equipmentParams: [],
      EquipmentListShow: false,
      formItem: {
        materielNo: "",
        goodsName: "",
        specification: "",
        brand: "",
        sparePartsAbc: "",
        sparePartsVed: "",
        goodsType: "",
        assetType: "",
        manageType: "",
        safeStock: "",
        standardLife: "",
        assetId: "",
        safetyCoefficient:null,
        purchaseLeadDay:null,
      },
      manageType: [
        {
          value: 1,
          label: '单个管理'
        },
        {
          value: 2,
          label: '批量管理'
        },
      ],
      goodsType: [],
      headers: {
        token: localStorage.getItem('ziyunFactoryPortalToken'),
      },
      showStatus:false,
      companyList: [],
      editingNode:null,
      editingItem:{},
      imgList:[],
      attachmentList:[],
      editStatus:true,
      formBox:{
        code:"",
        name:"",
        specifications:"",
        properties:"",
        unit:"",
        quantity:"",
      },
      serachId:"",
      searchText:'',
      treeData:[],
      versionValue:'',
      VersionList:[
        {
          value: 1,
          label: '版本1'
        },
        {
          value: 2,
          label: '版本2'
        },
      ]
    }
  },
  // watch: {
  //   EquipmentListShow(newVal, oldVal) {
  //     this.widthNum = newVal ? "1000" : "600"
  //   }
  // },
  mounted() {
    this.fileUploadUrl = `${util.getEnv()}/dms/dmsBom/dmsBomImport`
    this.queryTree()
    this.getCompanyList()
    this.getAsstetype()
    this.getList()
    let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
    for (let item of itemList) {
      if (item.code == "materialList") {
        this.checkBtnPermission.materialList = true
      }
      if (item.code == "materialDevicesList") {
        this.checkBtnPermission.materialDevicesList = true
      }
      if (item.code == "materielConfigAdd") {
        this.checkBtnPermission.materielConfigAdd = true
      }
      if (item.code == "MaterielConfigDelete") {
        this.checkBtnPermission.MaterielConfigDelete = true
      }
      if (item.code == "materialEdit") {
        this.checkBtnPermission.materialEdit = true
      }
      if (item.code == "materialConfigExport") {
        this.checkBtnPermission.materialConfigExport = true
      }
      if (item.code == "materielConfigImport") {
        this.checkBtnPermission.materielConfigImport = true
      }
      if (item.code == "materialConfigTemplate") {
        this.checkBtnPermission.materialConfigTemplate = true
      }
    }
  },
  methods:{
    exportTemplate() {
      const filName = 'BOM模板'
      this.axios({
        method: 'post',
        url: '/dms/dmsBom/dmsBomTemplate',
        responseType: 'blob',
        // data: {},
        // headers:{
        //   "content-type":"multipart/form-data"
        // }
      }).then(res => {
        fileDownload(res, filName + '.xlsx')
      })
    },
    getList(){
      this.axios({
        method: 'post',
        url: '/dms/dict/list ',
        data:{
          pageNo: 1,
          pageSize: 100
        }
      }).then(res => {
        if(res.code === 200){
          if (res.data.list && res.data.list.length){
            this.goodsType = res.data.list.filter(val=>val.name === '备件分类')
          }
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    uploadErro(response) {
      this.$Message.warning({ content: response, duration: 6, closable: true })
    },
    handleSuccess(res) {
      if (res.code === 200) {
        this.$Message.success(res.msg)
      }else {
        this.$Message.error(res.msg)
      }
      this.showStatus = false
      this.queryTree()
    },
    hoverTree(data){
      data.forEach(val=>{
        this.$set(val,'hoverStatus',false)
        if (val.children && val.children.length){
          this.hoverTree(val.children)
        }
      })
    },
    expendTree(treeData){
      treeData.forEach(val=>{
        val.opened = true
        if (val.children && val.children.length){
          this.expendTree(val.children)
        }
        if(val.id === this.serachId){
           return
        }
      })
    },
    inputKeyUp () {
      let _this = this
      const text = this.searchText
      this.$refs.tree.handleRecursionNodeChilds(this.$refs.tree, function (node) {
        if (text !== '' && node.model !== undefined) {
          const str = node.model.materielNo
          if (text === str) {
            _this.serachId = node.model.id
            _this.expendTree(_this.treeData)
            node.$el.querySelector('.tree-anchor').style.color = 'red'
          } else {
            node.$el.querySelector('.tree-anchor').style.color = '#000'
          }
        } else {
          node.$el.querySelector('.tree-anchor').style.color = '#000'
        }
      })
    },
    //查询资产分类
    getAsstetype() {
      let params = {
        // pageNum:1,
        // pageSize:100,
        belong: 2
      };
      this.axios({
        method: 'get',
        url: '/dms/assetCategory/getListByName',
        params

      }).then(res => {
        if (res.code === 200) {
          const arr = res.data.map(val => ({
            label: val.details,
            value: val.id
          }))
          this.assetType = this.assetType.concat(arr)
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    //获取公司
    getCompanyList() {
      getCompany().then(res => {
        if (res.code === 200) {
          this.companyList = res.data
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      }).finally(() => {
        this.loading = false
      })
    },
    assetTypeChange(val) {
      this.formItem.assetId = val
      if (val === 0) {
        this.formItem.manageType = 2
      } else {
        this.formItem.manageType = 1
      }
    },
    //上传附件
    handleBeforeUpload(file) {
      let formData = new FormData();
      formData.append("dir", 'device')
      formData.append("file", file)
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      this.axios({
        method: 'post',
        url: '/fileServer/upload',
        data: formData,
        config,
      }).then(res => {
        if (res.code == 200) {
          const {suffix,filepath,fileName,fileLength,fileUrl} = res.data;
          this.setFileList.push({
            fileName,
            filePath: filepath,
            fileUrl,
            fileDocumentEnumPath :"PARTS_ENGINEERING_DRAWINGS",
            suffix,
            fileSize:fileLength
          })
        }
      })
      return false;
    },
    //文件预览
    handlePreview(item) {
      if (item) {
        window.open(this.util.filePathToUrl(item.filePath))
      }
    },
    //文件删除
    delFileList(id) {
      this.setFileList = this.setFileList.filter((item, index) => index != id)
    },
    handleEquipment() {
      if (this.deviceList && this.deviceList.length){
        this.EquipmentIsShow = true
      }else {
        this.EquipmentIsShow = !this.EquipmentIsShow
      }
      this.EquipmentListShow = true
    },
    handleDel(index) {
      this.deviceList.splice(index, 1)
    },
    addEquipment() {
      this.devices.forEach(item => {
        if (!this.deviceList.find(e => e.id == item.id)) {
          this.deviceList.push(item)
        }
      })
      this.$refs.selectionList.selectAll(false)
    },
    handleSelect(selection) {
      this.devices = selection
      if (selection.length > 0) {
        this.allCheckE = true
      } else {
        this.allCheckE = false
      }

    },
    closeEquipment() {
      this.EquipmentListShow = false
      this.$refs.selectionList.selectAll(false)
    },
    equipmentChangeNum() {
      let params = {};
      for (let key in this.equipmentParams) {
        if (this.equipmentParams[key]) {
          this.$set(params, key, this.equipmentParams[key])
        }
      }
      equipmentSearchApi(params).then(res => {
        if (res.code === 200) {
          this.equipmentListArr = res.data
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    fileTree(data){
       let children = []
       return data.map(val=>{
        if (val.children && val.children.length){
          children = this.fileTree(val.children)
        }
         return {
           id:val.id,
           text:val.materielNo,
           children
         }
      })
    },
    delTree(id){
      this.axios({
        method: 'post',
        url: '/dms/dmsBom/deleteBatch',
        data:{
          delIds:[id]
        }
      }).then(res => {
        if (res.code === 200) {
          // this.delNote()
          this.editingItem = {}
          this.$Message.success('删除成功!')
          this.showStatus = false
          this.queryTree()
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    inputChange(item){
     this.formItem.materielNo = item.materielNo
    },
    getParams(){
      if (this.formItem.assetId !== 0){
        this.formItem.assetType = 1
      }else {
        this.formItem.assetType = 2
      }
      if ( this.deviceList &&  this.deviceList.length){
        let deviceIds = this.deviceList.map(item => item.id);
        this.formItem.deviceId = deviceIds.toString();
      }
      const files = this.setFileList.map(item=>{
        item.fileDocumentEnumPath  = "PARTS_ENGINEERING_DRAWINGS"
        return item;
      })
      return {
        deviceId:this.$route.query.id,
        parentId:this.editingItem.parentId,
        dmsBackupMaterielConfigRequestDTO:{
          ...this.formItem,
          dmsDeviceConfigResponseVOs:this.deviceList,
          files
        }
      }
    },
    goAddtree(){
      const data = this.getParams()
      data.isExistmaterielNo = true
      this.MaterialsShow = false
      this.addTree(data)
    },
    cacelCheck(data){
      this.axios({
        method: 'post',
        url:'/dms/dmsBom/addCheck',
        data
      }).then(res=>{
        if (res.data && res.data.length){
            this.addTree(data)
        }else {
          if (res.data !== null){
            data.isTmaterielSame = true
            this.addTree(data)
          }else {
            data.isExistmaterielNo = false
            this.addTree(data)
          }
        }
      })
    },
    addCheck(name){
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.MaterialsShow = false
          this.tableDataInfo = []
          const data = this.getParams()
          if (this.editingItem.id){
            this.addTree(data)
            return
          }
          this.axios({
            method: 'post',
            url:'/dms/dmsBom/addCheck',
            data
          }).then(res=>{
            if (res.data && res.data.length){
              this.MaterialsShow = true
              this.tableDataInfo = res.data
            }else {
              if (res.data !== null){
                data.isTmaterielSame = true
                this.addTree(data)
              }else {
                data.isExistmaterielNo = false
                this.addTree(data)
              }
            }
            // if (!res.data && res.code === 200){
            //     data.isExistmaterielNo = false
            //     this.addTree(data)
            // }else {
            //     this.MaterialsShow = true
            //     this.tableDataInfo = res.data
            // }
          })
        }
      })
    },
    addTree(data){
      let url = '/dms/dmsBom/add'
      if (this.editingItem.id){
        data.id = this.editingItem.id
        url = '/dms/dmsBom/edit'
      }
      this.axios({
        method: 'post',
        url,
        data
      }).then(res => {
        if (res.code === 200) {
          if (this.editingItem.id){
            this.$Message.success('编辑成功!')
          }else {
              this.$nextTick(()=>{
                if (this.treeData[0].children && this.treeData[0].children.length){
                  this.$Message.success('新增成功!')
                }
              })
          }
           this.editingItem = {}
           this.editStatus = true
           this.showStatus = false
           this.queryTree()
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    queryTree(item){
      this.setFileList = []
      this.deviceList = []
      this.EquipmentListShow = false
      this.EquipmentIsShow = false
      if (item && (item.newAddstatus || item.firstStatus)){
        this.formItem = {
          materielNo: item.materielNo,
          goodsName: "",
          specification: "",
          brand: "",
          sparePartsAbc: "",
          sparePartsVed: "",
          goodsType: "",
          assetType: "",
          manageType: "",
          safeStock: "",
          standardLife: "",
          assetId: "",
          safetyCoefficient:null,
          purchaseLeadDay:null,
        }
        this.$refs['formModel'].resetFields();
        return
      }
      const data = {
       deviceId:this.$route.query.id
      }
      if (item && item.id){
        data.id = item.id
      }
      if (!this.showStatus){
          this.showStatus = false
      }
      this.axios({
        method: 'post',
        url: '/dms/dmsBom/query',
        data
      }).then(res => {
        if (res.code === 200) {
          if (data.id && res.data && res.data.dmsBackupMaterielConfigRequestDTO){
            const obj = res.data.dmsBackupMaterielConfigRequestDTO
            obj.updateTime = undefined
            obj.createTime = undefined
            this.formItem = obj
            // this.formItem.assetId = obj.assetType
            if (obj.dmsDeviceConfigResponseVOs && obj.dmsDeviceConfigResponseVOs.length){
              this.deviceList = obj.dmsDeviceConfigResponseVOs
              this.EquipmentIsShow = true
            }
            if (obj.files && obj.files.length){
              this.setFileList = obj.files
            }
          }else {
            if (res.data){
              if (res.data.parentId == -1){
                // res.data.materielName = this.$route.query.deviceName
                // res.data.materielNo = this.$route.query.deviceMId
                res.data.firstStatus = true
              }
              this.treeData = [res.data]
              if (!this.showStatus){
                 this.showStatus = true
              }
             }
            this.formItem = {
              materielNo: "",
              goodsName: "",
              specification: "",
              brand: "",
              sparePartsAbc: "",
              sparePartsVed: "",
              goodsType: "",
              assetType: "",
              manageType: "",
              safeStock: "",
              safetyCoefficient:null,
              purchaseLeadDay:null,
              standardLife: "",
              assetId: "",
            }
            this.$refs['formModel'].resetFields();
          }
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    fiflterData(arr){
      arr.forEach(val=>{
        if (!val['selected'] && val['clickStatus']){
          val['clickStatus'] =  false
        }
        if (val.children && val.children.length){
          this.fiflterData(val.children)
        }
      })
    },
    // blur(obj){
    //   this.$set(obj,'selected',false)
    //   this.$set(obj,'editStatus',false)
    // },
    editClick(e){
      e.stopPropagation();
      this.editStatus = false
      // this.$set(this.editingItem,'editStatus',true)
      // this.$set(this.editingItem,'selected',false)
      // this.$nextTick(()=>{
      //   if (this.$refs.tarGetinput){
      //      this.$refs.tarGetinput.focus()
      //   }
      // })
    },
    addChildNode(e) {
      e.stopPropagation();
      if (this.editingItem.id || this.editingItem.firstStatus) {
        const obj = {
          newAddstatus:true,
          materielNo: "新增BOM",
          parentId:this.editingItem.id
        }
        this.editingItem.addChild(obj)
      }
    },
    clearChildnode(dataList){
      dataList.forEach(item=>{
        if (item.id === this.editingItem.id){
          return
        }
        if (item.children && item.children.length){
           item.children = item.children.filter(val=>val.id !== this.editingItem.id)
           this.clearChildnode(item.children)
        }
      })
    },
    delNote(){
      if (!this.editingItem.parentId){
        let index = this.editingNode.parentItem.indexOf(this.editingItem)
        this.editingNode.parentItem.splice(index, 1)
      }else {
        this.clearChildnode(this.editingNode.parentItem)
        this.$forceUpdate()
      }
    },
    removeNode(e) {
      e.stopPropagation();
      if (this.editingItem.id){
        this.delTree(this.editingItem.id)
      }else {
        this.delNote()
        this.$Message.success('删除成功!')
      }
      this.delFaultCodeShowF = false
    },
    itemDrop(node,item){
      if (!this.editingItem.id){
         this.editingItem.parentId = item.id
        return
      }
      this.axios({
        method: 'post',
        url: '/dms/dmsBom/moveNode',
        data:{
          id:this.editingItem.id,
          parentId:item.id
        }
      }).then(res => {
        if (res.code === 200) {
          this.$Message.success('拖动成功!')
          this.showStatus = false
          this.queryTree()
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    itemDragStart(node,item){
      this.editingItem = item
    },
    itemClick(node,item){
      if (item.newAddstatus){
         item.id = 0
      }
      this.editingNode = node
      this.editingItem = node.model
      this.fiflterData(this.treeData)
      if (node.model['clickStatus']){
        this.$set(this.editingItem,'selected',false)
        this.$set(this.editingItem,'clickStatus',false)
      }else {
        this.$set(this.editingItem,'clickStatus',true)
      }
      if (!node.model.selected){
        this.editingItem = {}
        this.formItem = {
          materielNo: "",
          goodsName: "",
          specification: "",
          brand: "",
          sparePartsAbc: "",
          sparePartsVed: "",
          goodsType: '',
          assetType:'',
          manageType:'',
          safeStock: "",
          safetyCoefficient:null,
          purchaseLeadDay:null,
          standardLife: "",
          assetId: ''
        }
        this.$refs['formModel'].resetFields();
        this.setFileList = []
      }else {
        if (!this.editStatus){
          this.editStatus = true
        }
        if (item.parentId == -1){
          this.formItem = {
            materielNo: "",
            goodsName: "",
            specification: "",
            brand: "",
            sparePartsAbc: "",
            sparePartsVed: "",
            goodsType: '',
            assetType:'',
            manageType:'',
            safeStock: "",
            safetyCoefficient:null,
            purchaseLeadDay:null,
            standardLife: "",
            assetId: ''
          }
          this.$refs['formModel'].resetFields();
          return;
        }else {
          this.$refs['formModel'].resetFields();
        }
        this.queryTree(item)
      }
    },
    delItemimg(obj){
      this.imgList = this.imgList.filter(val=>val.fileName !== obj.fileName)
      this.$Message.success('已删除')
    },
    delItem(obj){
      this.attachmentList = this.attachmentList.filter(val=>val.fileName !== obj.fileName)
      this.$Message.success('已删除')
    },
    handleUploadImg(file){
      let _this = this
      let reg = /\.(jpg)|(jpeg)|(png)$/
      if (!file.name.toLowerCase().match(reg)) {
        this.$Message.warning(({content:"请上传正确图片格式！",duration:6,closable:true}));
        return false
      }
      let flag;
      if (this.imgList && this.imgList.length){
        flag = this.imgList.some(val=>val.fileName === file.name)
      }
      if (flag){
        this.$Message.warning('不允许重复上传!')
        return false
      }
      const obj = {
        attachmentType:2,
        fileName:file.name,
        progressBar:0,
        uploadStatus:true
      }
      this.imgList.push(obj)
      let formData = new FormData();
      formData.append("dir", 'device')
      formData.append("file", file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      this.axios({
        method: 'post',
        url: '/fileServer/upload',
        data: formData,
        config,
        onUploadProgress: (progressEvent) => {
          _this.imgList.forEach((val,i)=>{
            _this.imgList[i]['progressBar'] = Math.round((progressEvent.loaded * 100) / progressEvent.total);
          })
        }
      }).then(res => {
        if (res.code == 200) {
          [res.data].forEach(val=>{
            for (let list of this.imgList){
              if (val.fileName === list.fileName){
                list['filePath'] = val.filepath
                list['fileUrl'] = val.fileUrl
              }
            }
          })
          this.$Message.success('上传成功')
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
        }
      });
      return false;
    },
    handleUpload(file) {
      let _this = this
      let reg = /\.(xlsx)|(xls)$/
      if (!file.name.toLowerCase().match(reg)) {
        this.$Message.warning(({content:"请上传excel文件！",duration:6,closable:true}));
        return false
      }
      let flag;
      if (this.attachmentList && this.attachmentList.length){
         flag = this.attachmentList.some(val=>val.fileName === file.name)
      }
      if (flag){
        this.$Message.warning('不允许重复上传!')
        return false
      }
      const obj = {
        attachmentType:1,
        fileName:file.name,
        progressBar:0,
        uploadStatus:true
      }
      this.attachmentList.push(obj)
      let formData = new FormData();
      formData.append("dir", 'device')
      formData.append("file", file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      this.axios({
        method: 'post',
        url: '/fileServer/upload',
        data: formData,
        config,
        onUploadProgress: (progressEvent) => {
          _this.attachmentList.forEach((val,i)=>{
            _this.attachmentList[i]['progressBar'] = Math.round((progressEvent.loaded * 100) / progressEvent.total);
          })
        }
      }).then(res => {
        if (res.code == 200) {
           [res.data].forEach(val=>{
            for (let list of this.attachmentList){
              if (val.fileName === list.fileName){
                  list['filePath'] = val.filepath
                  list['fileUrl'] = val.fileUrl
              }
            }
          })
          this.$Message.success('上传成功')
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
        }
      });
      return false;
    },
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/style/theme/common/variable.scss";
::v-deep .ivu-upload-drag{border: none !important;}
::v-deep .ivu-input[disabled]{
  background-color: transparent !important;
}
.ivu-input-number {
    width: -webkit-fill-available;
}

.buttonBox{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 10px;
}
.formList{
  ::v-deep .ivu-form-item{
    .ivu-form-item-label{
      padding-bottom: 0;
      font-size: 14px;
      font-weight: 400;
      color:$font-black-color;
      display: block;
      text-align: left;
    }
  }
}
.equipmentContent {
  font-weight: bold;
  margin: 0 4px 20px 0;
  font-size: 14px;
  color: #515a6e;
  cursor: pointer;
}
.bomCard{
  //height: calc(100vh - 160px);
  .bom_box{
    .boxLeft{
      .box_upload{
        margin-top: 15px;
        .attachmentList{
          margin-top: 10px;
          .barBox{
            margin-left: 15px;
            .barTop{
              width: 88%;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
          }
        }
      }
      .detail_title{
        display: block;
        margin-bottom: 10px;
        padding-left: 10px;
        font-size: 15px;
        font-weight: 400;
      }
      .detail_title:before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 7px;
        height: 20px;
        background: #187bdb;
      }
    }
    .right_box{
      ::v-deep .ivu-form .ivu-form-item-label{
        padding: 0 0 5px 0 !important;
      }
      .item_right{
        padding: 0 10px;
        .ivu-form-item{
          margin-bottom: 15px;
        }
      }
    }
    .box_bot{
      width: 100%;
      height: calc(100vh - 360px);
      overflow-x: scroll;
      .tree{
        height: 100%;
        ::v-deep .tree-children{
          overflow: unset;
        }
        ::v-deep .tree-open{
          .tree-children{
            display: block !important;
            opacity:1;
          }
        }
        ::v-deep .tree-closed{
          .tree-children{
            display:none !important;
            opacity:0;
            transition:1s;
          }
        }
        ::v-deep .tarGetinput{
          .ivu-input{
            height: 22px;
            line-height: 22px;
          }
        }
      ::v-deep.tree-container-ul{
        height: 100%;
        overflow: unset;
      }
      }
      .iconBox{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 10px;
       .icon_img{
         display: flex;
         justify-content: center;
         align-items: center;
         cursor: pointer;
         padding-right: 5px;
         width: 20px;
         height: 15px;
         img{
           width: 100%;
           height: 100%;
         }
       }
      }
    }
    .box_top{
      display: flex;
      flex-direction: column;
      justify-content: center;
      .title{
        margin-bottom: 10px;
        font-size: 15px;
        font-weight: 400;
        padding-left: 10px;
      }
      .title:before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 7px;
        height: 20px;
        background: #187bdb;
      }
    }
  }
  .title{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
  }
}
</style>
